site_8g/src/app/[locale]/template.tsx

"use client";

import { usePathname } from "@/i18n/routing";
import { AnimatePresence, motion } from "framer-motion";
import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { ReactNode, useContext, useRef } from "react";
// const Template = ({ children }: { children: ReactNode }) => {
//     const key = usePathname();
//     return (
//         <AnimatePresence mode="popLayout">
//             <motion.div
//                 layout
//                 key={key}
//                 initial={{ opacity: 0 }}
//                 animate={{ opacity: 1 }}
//                 exit={{ opacity: 0 }}
//                 transition={{
//                     duration: 1,
//                     ease: "easeOut",
//                 }}
//                 className={"h-[100%]"}
//             >
//                 {children}
//             </motion.div>
//         </AnimatePresence>
//     );
// };
function FrozenRouter(props: { children: ReactNode }) {
    const context = useContext(LayoutRouterContext ?? {});
    const frozen = useRef(context).current;
    return (
        <LayoutRouterContext.Provider value={frozen}>{props.children}</LayoutRouterContext.Provider>
    );
}

const Template = ({ children }: { children: ReactNode }) => {
    const key = usePathname();
    return (
        <AnimatePresence mode="wait">
            <motion.div
                key={key}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{
                    duration: 0.3,
                    ease: "easeInOut",
                }}
                layout="position"
                className={"h-[100%]"}
            >
                {children}
            </motion.div>
        </AnimatePresence>
    );
};
export default Template;